<template>
	<div>
		<mj-title type="h2" title="Steps 步骤条"></mj-title>
		<div class="page-desc">拆分某项流程的步骤，引导用户按流程完成任务。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-steps></mj-steps>
				<ul class="page-list">
					<li>默认显示3条，初始在step1</li>
				</ul>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-steps>&lt;/mj-steps>
					&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="更多功能"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-steps 
					:current-step="stepActive" 
					:total-steps="5" 
					:steps-label="stepsLabel" 
					:steps-desc="stepsDesc" 
					@change="onChange">
				</mj-steps>
				<mj-button @click="prev">上一步</mj-button>
				<mj-button @click="next">下一步</mj-button>
				<ul class="page-list">
					<li>添加<code>@change</code>，激活在label上点击切换功能</li>
				</ul>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
					  &lt;mj-steps 
					    :current-step="stepActive" 
					    :total-steps="5" 
					    :steps-label="stepsLabel" 
					    :steps-desc="stepsDesc" 
					    @change="onChange">
					  &lt;/mj-steps>
					  &lt;mj-button @click="prev">上一步&lt;/mj-button>
					  &lt;mj-button @click="next">下一步&lt;/mj-button>
					&lt;/template>
					&lt;script>
					export default {
					  data() {
					      return {
					        stepActive:1,
					        stepsLabel: ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'],
					        stepsDesc: ['description 1', 'description 2', 'description 3', 'description 4', 'description 5'],
					      }
					  },
					  methods:{
					      onChange (index) { // 父组件获取切换后的选中步骤
					         console.log('parentIndex:', index)
					         this.stepActive = index
					      },
					      prev(){
					        if(this.stepActive > 1){
					          this.stepActive = this.stepActive - 1
					        }
					      },
					      next(){
					        if(this.setpAcitve){
					         this.stepActive = this.stepActive + 1
					        }
					      },
					  }
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="自定义icon"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-steps 
					:current-step="stepActive" 
					:steps-label="label" 
					:steps-icon="stepsIcon">
				</mj-steps>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">&lt;template>
					  &lt;mj-steps 
					    :current-step="stepActive" 
					    :steps-label="label" 
					    :steps-icon="stepsIcon">
					  &lt;/mj-steps>
					&lt;/template>
					&lt;script>
					export default {
					  data() {
					    return {
					        stepActive:1,
					        label:['注册','填写信息','成功'],
					        stepsIcon:['&lt;i class="icon icon-user">&lt;/i>','&lt;i class="icon icon-app">&lt;/i>','&lt;i class="icon icon-yes-circle">&lt;/i>'],
					    }
					  },
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Steps 参数"></mj-title>
		<table class="api-table">

			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>current-step</td>
					<td>当前步骤</td>
					<td>Number</td>
					<td>1</td>
				</tr>
				<tr>
					<td>total-steps</td>
					<td>总的步骤数</td>
					<td>Number</td>
					<td>3</td>
				</tr>
				<tr>
					<td>steps-label</td>
					<td>步骤title数组</td>
					<td>Array</td>
					<td>[]</td>
				</tr>
				<tr>
					<td>steps-desc</td>
					<td>步骤description数组</td>
					<td>Array</td>
					<td>[]</td>
				</tr>
				<tr>
					<td>steps-icon</td>
					<td>自定义icon，使用<code>steps-icon</code>参数，可以自定义icon，使用html结构数组对应步骤数</td>
					<td>Array</td>
					<td>[]</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Steps 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>返回值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>change</td>
					<td>点击切换选中步骤</td>
					<td>index</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	data() {
	    return {
	      stepsLabel: ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'],
	      stepsDesc: ['description 1', 'description 2', 'description 3', 'description 4', 'description 5'],
	      stepsIcon:['<i class="icon icon-user"></i>','<i class="icon icon-edit"></i>','<i class="icon icon-yes-circle"></i>'],
	      stepActive:1,
	      label:['注册','填写信息','成功'],
	    }
	},	
	methods:{
	    onChange (index) { // 父组件获取切换后的选中步骤
	     	console.log('parentIndex:', index)
	     	this.stepActive = index
	    },
	    prev(){
	    	if(this.stepActive > 1){
	    		this.stepActive = this.stepActive - 1
	    	}
	    },
	    next(){
	    	if(this.stepActive < 5){
	    		this.stepActive = this.stepActive + 1
	    	}
	    },

	}
}
</script>

<style scoped>
.page-list {margin-top: 10px;}
</style>